@extends('admin.frame_layout')
<?php $top_selected = "模式管理";$page_menu = "会员等级设定" ?>
@section('content')
    <form action="{{route('admin.vips.save')}}" method="post" id="vip_setting">
        {!! csrf_field() !!}
        <div class="formbody">
            {{-- 等级参数设置 --}}
            <div class="formtitle"><span>会员等级参数设置</span></div>
            <ul class="forminfo">
                <li>
                    <label class="lable">等级标识</label>
                    <input name="slug" type="text" class="dfinput" value="{{$vip->slug or ""}}"/>
                    <i for="">会员等级标识是用来引用会员等级属性！</i>
                </li>
                <li>
                    <label class="lable">等级名称</label>
                    <input name="name" type="text" class="dfinput" value="{{$vip->name or ""}}"/>
                    <i for="">会员名称为必填项！</i>
                </li>
                <li>
                    <label class="lable">等级属性</label>
                    <div class="attr_area">
                        @if(isset($vip) && !empty(\App\VModels\VVip::attrBySlug($vip->slug)))
                            @foreach(\App\VModels\VVip::detailBySlug($vip->slug) as $index => $group)
                                <span class="group" id="{{md5($group["key"])}}"
                                      onclick="openAttrDlg('{{md5($group["key"])}}','{{json_encode($group)}}')"
                                      json='{{json_encode($group)}}'>
                                    <i class="k">{{$group["key"]}}</i>
                                    <i class="v">{{$group["val"]}}</i>
                                    <b onclick="return delGroup('{{md5($group["key"])}}');">×</b>
                                </span>
                            @endforeach
                        @endif
                        <div class="add" onclick="openAttrDlg()"><img src="{{asset('admin/imgs/t01.png')}}"/></div>
                    </div>
                </li>
                <input type="hidden" name="attr_vals" id="attr_vals"/>
                <li>
                    <label class="lable">&nbsp;</label>
                    <input type="submit" class="btn" value="添加新会员等级"/>
                </li>
            </ul>

            {{-- 发行记录 --}}
            <div class="formtitle"><span>现有会员等级列表</span></div>
            <table class="tablelist">
                <thead>
                <tr>
                    <th width="100px">Slug<i class="sort"><img src="{{asset('admin/imgs/px.gif')}}"/></i></th>
                    <th>等级名称</th>
                    <th>等级属性</th>
                    <th>编辑</th>
                </tr>
                </thead>
                <tbody>
                @forelse($vips as $vip)
                    <tr>
                        <td>{{$vip->slug}}</td>
                        <td>{{$vip->name}}</td>
                        <td>
                            @foreach(\App\VModels\VVip::attrBySlug($vip->slug) as $key=>$value)
                                <i class="k">{{$key}}:{{$value}}</i>
                            @endforeach
                        </td>
                        <td>
                            <a class="red" href="{{route("admin.vips",["slug"=>$vip->slug])}}">编辑</a>
                            <a class="red" onclick="openOkDlg('{{route("admin.vips.del",["slug"=>$vip->slug])}}')"
                               href="#">删除</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="999">==★== 暂无会员等级信息 ==★==</td>
                    </tr>
                @endforelse
                </tbody>
            </table>
            @include('admin.coms.fenye')
        </div>
    </form>

    @include('admin.coms.dialog')
    @include('admin.coms.attr-dialog')
@endsection
@section('footer')
    {{--<script src="{{asset("admin/js/md5.min.js")}}"></script>--}}
    <script type="text/javascript">
        $(function () {
            initCalcText();
            $(".calc").hover(function () {
                $(this).closest("div").find('i').show();
            }, function () {
                $(this).closest("div").find('i').hide();
            });

            $("#vip_setting").validate({
                rules: {},
                errorPlacement: function (error, element) {
                },
                submitHandler: function (form) {
                    $(form).ajaxSubmit({
                        dataType: "json",
                        type: "post",
                        success: function (data) {
                            if (data.code == 0) {
                                toastr["success"](data.msg);
                                setInterval(function () {
                                    window.location.reload();
                                }, 2000);
                            } else {
                                toastr["error"](data.msg);
                            }
                        }
                    });
                }
            });
        });

        /**
         * 打开属性编辑的对话框
         * @param defVal 默认值
         */
        function openAttrDlg(id, defVal) {
            window.Dialog.openAttrDlg(id, defVal, function (status, attrObj, id) {
                if (status == 1) {  //确定按钮回调
                    if (typeof id != "undefined") { //编辑回调

                        var oldElem = $("#" + id);
                        oldElem.find(".k").html(attrObj.key);
                        oldElem.find(".v").html(attrObj.val);
                        oldElem.find(".intro").html(attrObj.intro);
                        oldElem.unbind("click");
                        oldElem.click(function () {
                            (function (json) {
                                openAttrDlg(id, json);
                            })(JSON.stringify(attrObj));
                        });
                        oldElem.attr("json", JSON.stringify(attrObj));
                        setTimeout(function () {
                            refreshVals();
                        }, 0);
                    } else {    //新添加属性回调

                        //var id = md5(JSON.stringify(attrObj));
                        var id = attrObj.key + "-" + attrObj.val;
                        var newElem = $(
                            "<span class=\"group\"\ id=\"" + id + "\">" +
                            "<i class=\"k\">" + attrObj.key + "</i>" +
                            "<i class=\"v\">" + attrObj.val + "</i>" +
                            "<b>×</b>" +
                            "</span>");

                        newElem.find("b").click(function () {
                            (function () {
                                delGroup(id);   //删除这个元素
                            })(id);
                        });

                        newElem.click(function () {
                            (function (json) {
                                openAttrDlg(id, json);
                            })(JSON.stringify(attrObj));
                        });

                        newElem.attr("json", JSON.stringify(attrObj));
                        $(".attr_area .add").before(newElem);
                        setTimeout(function () {
                            refreshVals();
                        }, 0);
                    }
                }
            });
        }

        /**
         * 刷新表单域记录的值
         */
        function refreshVals() {
            var attrs = $(".attr_area").find("span");
            var vals = "";
            for (var i = 0; i < attrs.length; i++) {
                if (i == 0) {
                    vals = $(attrs[i]).attr("json");
                } else {
                    vals += "-" + $(attrs[i]).attr("json");
                }
            }
            console.log(vals);
            $("#attr_vals").val(vals);
        }
        ;
        refreshVals();  //立即调用刷新默认值

        /**
         * 删除添加的一个元素
         */
        function delGroup(id) {
            event.cancelBubble = true;
            $("#" + id).remove();   //删除这个元素
            setTimeout(function () {
                refreshVals();
            }, 0);

            return false;
        }


    </script>
@endsection
